<template>
  <div class="portal-list">
    <div class="protlet-title">请选择组件</div>
    <div class="portal-list-body">
      <!--布局模板, 缩放 300*200-->
      <div
        v-for="(item, index) in portalZoomList"
        :key="item.id"
        style="width: 300px; height: 200px; position: relative; border: 1px solid black; overflow: hidden"
        @click="clickPortletSelect(index)"
      >
        <component :is="item.com"></component>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, defineEmits, ref, toRefs, reactive, defineProps, defineAsyncComponent } from 'vue'
import factory from '../../factory'
import regCom from '@/utils/registerComFun'
import { storeToRefs } from 'pinia'
/**引入pinia菜单**/
import { useStoreMenu } from '@/pinia/menuList'
const StorePortlet = useStoreMenu()
const { portletList } = storeToRefs(StorePortlet)
//引入pinia 保存的所有 小组件/
import { useStoreAllPortlet } from '@/pinia/allPortletList'
const StoreAllPortlet = useStoreAllPortlet()
// const {allPortletList: portalZoomList} = storeToRefs(StoreAllPortlet)

const portalZoomList = ref([])
//==获得可供选择的组件列表=================================
function suofang() {
  let block = document.getElementsByClassName('suofangblock')
  Array.prototype.forEach.call(block, function (el) {
    // 宽度缩放比例:wr = el.offsetWidth/300, 高度缩放比例:hr = el.offsetHeight/200 , 取最大比例缩放
    let wr = el.children[0].offsetWidth / 300
    let hr = el.children[0].offsetHeight / 200
    let r = wr
    let sw = el.children[0].offsetWidth / r
    let sh = el.children[0].offsetHeight / r
    el.children[0].style.transform = `scale(${1 / r},${1 / r})`
    el.children[0].style['transform-origin'] = '0% 0%'
  })
}
if (!portalZoomList.value.length) {
  let post = { pageNo: 1, pageSize: 10 }
  factory.searchportList(post).then((res) => {
    res.data.dataList.forEach((m, n) => {
      m.com = regCom(m.html)
      portalZoomList.value.push(m)
    })
    setTimeout(() => {
      suofang()
    }, 0)
  })
}

//选择小组件添加入布局
const props = defineProps({
  parentInfo: { type: Object, default: () => {} },
})
const { parentInfo } = toRefs(props)
const emit = defineEmits(['portletSelected'])
const clickPortletSelect = (v) => {
  portalZoomList.value[v].params = {}
  portalZoomList.value[v].params = parentInfo.value
  StorePortlet.addPort(portalZoomList.value[v])
  emit('portletSelected', '')
}
</script>

<style scoped lang="less">
.portal-list {
  width: 80%;
  height: 80%;
  position: fixed;
  top: 62px;
  left: 10%;
  border: 1px solid #8c8c8c;
  user-select: none;
  background-color: white;
  box-sizing: content-box;

  .protlet-title {
    height: 40px;
  }

  .portal-list-body {
    max-height: calc(100% - 40px);
    box-sizing: border-box;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    .suofangblock {
      width: 300px;
      height: 200px;
      position: relative;
      border: 1px solid black;
      overflow: hidden;
      margin: 10px;
    }
  }
}
</style>
